/**
 * Created by zhaoxk on 2017/2/24.
 */
import React from 'react';
import _ from 'lodash';
import { Accordion } from 'antd-mobile';
import styles from './index.less';

const Panel = Accordion.Panel;

function Item({ data }) {
    const result = _.map(data, (d, i) => (
        <div
            className={styles.sign}
            key={`signItem${i}`}
        >
            <ul>
                <li><span>体温：</span>{d.temperature}</li>
                <li><span>脉搏：</span>{d.pulse}</li>
                <li><span>呼吸：</span>{d.breathe}</li>
                <li><span>血压：</span>{d.bloodPressure}</li>
            </ul>
            <em>{d.time}</em>
        </div>
    ));
    if (result.length > 0) {
        return <div>{result}</div>;
    }
    return (
        <div
            style={{
                padding: '.5rem 0',
                textAlign: 'center',
                color: '#999'
            }}
        >
            暂无数据
        </div>
    );
}

function Sign({ data }) {
    return (
        <Accordion
            accordion
            defaultActiveKey="sign0"
        >
            {_.map(data, (d, i) => (
                <Panel
                    header={<div style={{color: '#aaa'}}>{d.date}</div>}
                    key={`sign${i}`}
                >
                    <Item
                        data={d.detail}
                    />
                </Panel>
            ))}
        </Accordion>
    );
}

export default Sign;
